<template>
	<view class="content">
		<u-navbar title="好友详情" :placeholder="true" bgColor="rgba(0,0,0,0.0)" :autoBack="true">
		</u-navbar>
		<u-toast ref="uToast" />
		<view class="user-box">
			<image :src="info.avatar" class="user-avatar" mode="aspectFill"></image>
			<view class="user-right">
				<view class="user-right-item user-name">
					<text class="nickname-text">{{info.nickname_origin ? info.nickname_origin:info.nickname}}</text>
					<text v-if="info.remark">(<text class="nickname-text">{{info.remark}}</text>)</text>
				</view>
				<view v-if="info.status" :class="'user-status-' + info.status.value" class="user-status"> • {{info.status.chinese}}</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn">
				<u-button type="primary" shape="circle" text="去聊天" @click="goToSessionInfo(info.id)"></u-button>
			</view>
			<view class="btn">
				<u-button  type="error" shape="circle" text="删除好友" @click="gouserdel"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info: {},
				userinfo: {},
				buttons: [],
			}
		},
		onLoad(e) {
			this.id = e.id
			this.ws.pageFun(this.pageDataLoad, this);
			this.userinfo = uni.getStorageSync('userinfo');
			setTimeout(()=>{
				console.log(this.buttons)
			},1000)
		},
		onShow() {
			this.ws.checkNetwork(this)
			if (this.ws.pageRefresh.centerInfo) {
				this.ws.pageRefresh.centerInfo = false
				this.ws.pageFun(this.pageDataLoad, this);
			}
		},
		methods: {
			gouserdel(){
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否确定删除好友！',
					success: function (res) { 
						if (res.confirm) {
							console.log('用户点击确定');	
							that.ws.pageFun(function(){
								let message = {
									c: 'User',
									a: 'delContact',
									data: {
										'id': that.info.id,
										'type': that.info.type
									}
								}
								that.ws.send(message);
							}, that)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goToSessionInfo(id){
				let message = { c: 'Message', a: 'openSession', data: { 'id': id, 'type': 'user' } }
				this.ws.send(message);
			},
			pageDataLoad: function(refresh = false) {
				var that = this
				this.ws.send({
					c: 'User',
					a: 'infoDetail',
					data: {
						'method': 'get',
						'type': 'user',
						'id': that.id ? that.id : that.userinfo.id,
						'requestor': that.userinfo.id,
						'refresh': refresh
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 800rpx;
		padding: 30rpx;

		.user-box {
			display: flex;
			padding: 20rpx 0;
			align-items: center;

			.user-avatar {
				height: 120rpx;
				width: 120rpx;
			}

			.user-right {
				width: 70%;
				padding-left: 30rpx;

				.user-status {
					color: #999999;
					line-height: 46rpx;
					margin-top: 10rpx;
				}

				.user-name {
					line-height: 46rpx;
					font-size: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.nickname-text {
					display: inline-flex;
					max-width: 46%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.btn-box {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				width: 48%;
			}
		}
	}
</style>